<template>
  <div class="waterfall">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <my-waterfall :data="listData"></my-waterfall>
      </van-list>
    </div>
</template>

<script>
import myWaterfall from "./components/myWaterfall";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      listData: [
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fcd93b080ca4931cc33883bfdcb84a41e6638868618fd0-R7WkgY_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258028&t=b310adbe6cb3d0955dfde42a7d1e1bb1',
          title: '《名侦探柯南：沉默的15分钟》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fimages01%2F20210729%2F26c43ffac58e4699bfc17b0068b1dcbd.png&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=7c25fa1fa92a859a400525c8f8cfffb2',
          title: '《名侦探柯南：第11个前锋》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13346715126%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=5c8a295c0b5230a46447ef54c95aa2d3',
          title: '《名侦探柯南：绝海的侦探》'
        },
        {
          imgSrc: 'https://img2.baidu.com/it/u=1148490820,4115332687&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732',
          title: '《名侦探柯南：异次元的狙击手》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F30%2F20200630171716_dhkmb.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=3d9d1644309e324ea13ba5ce267ca5ab',
          title: '《名侦探柯南：绝海的侦探》'
        },
        {
          imgSrc: 'https://img2.baidu.com/it/u=1148490820,4115332687&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732',
          title: '《名侦探柯南：异次元的狙击手》'
        }
      ]
    }
  },
  components: {
    myWaterfall
  },
  methods: {
    onLoad () {
      let temp = [
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fcd93b080ca4931cc33883bfdcb84a41e6638868618fd0-R7WkgY_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258028&t=b310adbe6cb3d0955dfde42a7d1e1bb1',
          title: '《名侦探柯南：沉默的15分钟》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fimages01%2F20210729%2F26c43ffac58e4699bfc17b0068b1dcbd.png&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=7c25fa1fa92a859a400525c8f8cfffb2',
          title: '《名侦探柯南：第11个前锋》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13346715126%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=5c8a295c0b5230a46447ef54c95aa2d3',
          title: '《名侦探柯南：绝海的侦探》'
        },
        {
          imgSrc: 'https://img2.baidu.com/it/u=1148490820,4115332687&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732',
          title: '《名侦探柯南：异次元的狙击手》'
        },
        {
          imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F30%2F20200630171716_dhkmb.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655258207&t=3d9d1644309e324ea13ba5ce267ca5ab',
          title: '《名侦探柯南：绝海的侦探》'
        },
        {
          imgSrc: 'https://img2.baidu.com/it/u=1148490820,4115332687&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732',
          title: '《名侦探柯南：异次元的狙击手》'
        }
      ]
      this.listData = [...this.listData, ...temp]
      this.loading = false
      if (this.listData.length > 30) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: #f8f8f8;
  width: 100%;
}
</style>
